(function () {
  let myChart = echarts.init(document.querySelector(".box:nth-of-type(2)"));
  let option = {
    title: {
      text: "江苏省人口与人口增长",
      left: "center",
      top: 20,
      textStyle: {
        color: "#faff72",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    grid:
    {
        left:'80'
    },
    legend: {
      data: ["人口", "人口增长"],
    },
    xAxis: [
      {
        type: "category",
        data: ["2011年", "2012年", "2013年", "2014年", "2015年", "2016年", "2017年","2018年","2019年","2020年"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "人口",
        min: 8000,
        max: 9000,
        interval: 200,
        axisLabel: {
          formatter: "{value} 万人",
        },
      },
      {
        type: "value",
        name: "人口增长",
        min: 0,
        max: 2,
        interval: 0.2,
        axisLabel: {
          formatter: "{value} %",
        },
      },
    ],
    series: [
      {
        name: "人口",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "万人";
          },
        },
        data: [
          8022,8119,8192,8281,8315,8381,8423,8446,8469,8477
        ],
      },
      {
        name: "人口增长",
        type: "line",
        smooth:true,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + "%";
          },
        },
        data: [
          1.95,1.21,0.89,1.08,0.41,0.8,0.5,0.27,0.27,0.1
        ],
      },
    ],
  };
  myChart.setOption(option)

    window.addEventListener('resize', () => {
        myChart.resize()
    })
})();
